import { default } from './MScrollTop.vue';
<template>
    <view
        class="m-simple-card-box"
        :style="{ 'background-image': backimage }"
        :class="[shadow, { 'm-simple-card-box-padding': isPadding }]"
    >
        <slot></slot>
    </view>
</template>

<script lang="ts" setup>
const props = defineProps({
    shadow: { type: String, default: 'none' },
    backimage: { type: String, default: 'none' },
    isPadding: { type: Boolean, default: true }
})
let shadow = `m-shadow--${props.shadow}`
</script>

<style lang="scss" scoped>
$m-shadow-base: 0 4rpx 8rpx rgba(0, 0, 0, 0.12), 0 0 12rpx rgba(0, 0, 0, 0.04);
$m-shadow-sm: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);
.m-simple-card-box {
    margin: $uni-spacing-row-base;
    box-sizing: border-box;
    background-color: $uni-bg-color;
    overflow: hidden;
    border-radius: $uni-border-radius-lg;
    box-sizing: border-box;
    background-repeat: no-repeat;
}
.m-simple-card-box-padding {
    padding: $uni-spacing-row-base;
}
.m-shadow {
    &--base {
        box-shadow: $m-shadow-base;
    }
    &--sm {
        box-shadow: $m-shadow-sm;
    }
}
</style>
